<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="nav">
        <a href="/home">首页</a>
        <a href="/service">服务</a>
        <a href="/mine">个人中心</a>
    </div>

    <div class="content">
</body>

</html>
<script>
    var as = document.querySelectorAll('a');
    as.forEach((item) => {
        //给每个a标签绑定点击事件
        item.onclick = function (e) {
            //阻止a标签的默认跳转页面
            e.preventDefault()
            // 语法: history.pushState( 历史记录的状态 , 保留字符串 , url地址 );
            // this.href 获取的是 当前点击的a标签的href属性值
            history.pushState({ title: '', url: '' }, '', this.href)
            //location.pathname 获取的是点击后最新的url路径
            switch(location.pathname){
                case'/home':home_page();break;
                case '/service': service_page(); break;
                case '/mine': mine_page(); break;
            }  
        }
    })


    //渲染首页的内容
    function home_page() {
        document.querySelector('.content').innerHTML = '首页的内容';
    }
    //渲染服务的内容
    function service_page() {
        document.querySelector('.content').innerHTML = '服务的内容';
    }
    //渲染个人中心的内容
    function mine_page() {
        document.querySelector('.content').innerHTML = '个人中心的内容';
    }

</script>